src/renderer/hooks/use-blocknote.ts (1)

145-147: Simplify element lookup with attribute selector

The current approach converts a NodeList to an array and uses find. A direct attribute selector is more concise and efficient.

♻️ Proposed simplification

       requestAnimationFrame(() => {
-        const targetElement = Array.from(
-          editor.domElement?.querySelectorAll<HTMLElement>('[data-node-type="blockContainer"][data-id]') ?? []
-        ).find((element) => element.dataset.id === blockId)
+        const targetElement = editor.domElement?.querySelector<HTMLElement>(
+          `[data-node-type="blockContainer"][data-id="${blockId}"]`
+        )

         targetElement?.scrollIntoView({ block: 'center' })
       })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/hooks/use-blocknote.ts` around lines 145 - 147, The lookup for
targetElement can be simplified: instead of converting the NodeList to an array
and using find, use a direct attribute selector on editor.domElement to query
the single element with the matching data-id; update the code that sets
targetElement (currently using Array.from(...).find(...)) to call
editor.domElement?.querySelector<HTMLElement> with a selector combining
data-node-type="blockContainer" and data-id equal to the blockId value so it
returns the element directly.

src/renderer/components/editor/EditorToolbar.tsx (1)

25-59: Inconsistent button components: <Button> vs native <button>

The TOC toggle (lines 25-38) uses the imported <Button> component with variant="ghost", while the view mode toggle (lines 40-59) uses a native <button> element with manually applied styles. This creates inconsistency in both code style and potentially visual appearance.

Consider using the <Button> component for both toggles to maintain consistency.

♻️ Proposed fix to use Button component consistently

-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           onClick={onToggleViewMode}
-          className={cn(
-            'flex items-center gap-1 px-2 py-0.5 text-xs rounded transition-colors',
-            'text-muted-foreground hover:text-foreground hover:bg-secondary'
-          )}
+          className="h-6 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
           title={viewMode === 'markdown' ? 'Switch to source mode' : 'Switch to WYSIWYG mode'}
         >
           {viewMode === 'markdown' ? (
             <>
               <Code2 size={12} />
               <span>Source</span>
             </>
           ) : (
             <>
               <Eye size={12} />
               <span>Preview</span>
             </>
           )}
-        </button>
+        </Button>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/editor/EditorToolbar.tsx` around lines 25 - 59,
Replace the native <button> used for the view-mode toggle with the shared Button
component to keep UI and behavior consistent; specifically change the element
rendering the view toggle (the block using onToggleViewMode and checking
viewMode) to use the imported Button component (same as the TOC toggle) and move
the existing className, title, onClick, and children into that Button so it
preserves styles and accessibility (aria/state handled like isTocVisible),
ensuring the component uses the same props pattern and variant (e.g.,
variant="ghost" or matching styling).

src/renderer/components/editor/EditorPanel.tsx (1)

18-18: useTocSettings() return value is unused

The hook is called but its return value isn't used. If this is intentional for triggering settings persistence side effects, consider adding a comment to clarify. Otherwise, if a return value is expected, it should be destructured.

-  useTocSettings()
+  // Initialize TOC settings persistence
+  useTocSettings()

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/editor/EditorPanel.tsx` at line 18, The call to
useTocSettings() in EditorPanel.tsx currently ignores its return value; either
explicitly use/destructure the returned value(s) from useTocSettings (e.g.,
const { ... } = useTocSettings()) if the hook exposes state or handlers, or, if
the hook is only invoked for side effects, add a short inline comment above the
call (e.g., // intentionally invoked for side effects: persists TOC settings) to
make the intent explicit and avoid linter confusion.

src/renderer/components/editor/TableOfContents.test.tsx (1)

7-25: The settings test never exercises the settings callback.

DropdownMenuContent is always rendered here, and the mocked DropdownMenuRadioGroup never forwards onValueChange, so the last test only proves the labels exist. It won’t catch a broken onMaxHeadingLevelChange wire-up in TableOfContents.tsx.

Also applies to: 81-95

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/editor/TableOfContents.test.tsx` around lines 7 - 25,
Update the mock so the test actually exercises the settings callback: change
DropdownMenuRadioGroup to accept an onValueChange prop and render its children
while injecting an onSelect handler into DropdownMenuRadioItem instances that
calls onValueChange with the item's value; ensure DropdownMenuRadioItem still
accepts value and onSelect but when clicked it invokes the injected onSelect so
a click triggers the group's onValueChange. This will allow
TableOfContents.tsx's onMaxHeadingLevelChange wiring to be exercised by the
tests.

src/renderer/components/editor/MarkdownEditor.tsx (1)

11-16: Remove or explicitly use filePath here.

src/renderer/components/editor/EditorPanel.tsx:73-80 still passes filePath, but this component drops it and only keys its reset path off content. That leaves the prop contract misleading and makes same-content file switches easy to mishandle unless a parent remount is doing the reset already.

Also applies to: 39-43, 91-103

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/editor/MarkdownEditor.tsx` around lines 11 - 16,
MarkdownEditorProps declares filePath but MarkdownEditor ignores it, causing
misleading prop contract and incorrect resets when switching between files with
identical content; either remove filePath from the prop interface and from
EditorPanel or use it inside MarkdownEditor to drive resets/remounts. Fix by
updating the MarkdownEditor component (and MarkdownEditorProps) to consume
filePath—e.g., include filePath in the component's key or in the useEffect
dependency that initializes/reset local state or the editor value—so changes to
filePath force the editor to reset even if content is identical; also update
EditorPanel usage to match (keep passing filePath if you choose to use it, or
stop passing it if you remove the prop).

src/renderer/components/editor/CodeEditor.tsx (1)

20-27: ⚠️ Potential issue | 🟠 Major

Keep TOC percent bounds within the panel group's valid 0-100 range.

This helper can still produce maxPercent > 100 on narrow windows. That propagates into tocPanelDefaultSize and the layout sync at Lines 138-145, so the group can be asked to render impossible sizes. Clamp the computed percentages before using them for defaultSize, minSize, maxSize, or setLayout.

Possible hardening

 function getTocPercentBounds(panelWidth: number): { minPercent: number; maxPercent: number } {
-  const minPercent = (TOC_MIN_WIDTH / panelWidth) * 100
-  const maxPercent = (TOC_MAX_WIDTH / panelWidth) * 100
+  const safePanelWidth = Math.max(panelWidth, 1)
+  const minPercent = Math.min(100, (TOC_MIN_WIDTH / safePanelWidth) * 100)
+  const maxPercent = Math.min(100, (TOC_MAX_WIDTH / safePanelWidth) * 100)
 
   return {
     minPercent,
     maxPercent: Math.max(minPercent, maxPercent)
   }
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/editor/CodeEditor.tsx` around lines 20 - 27,
getTocPercentBounds can return values >100 on narrow panels; clamp the computed
minPercent and maxPercent to the valid 0–100 range and ensure maxPercent >=
minPercent before returning. Update the function getTocPercentBounds to cap
minPercent at least 0 and maxPercent at most 100 (and compute maxPercent =
Math.max(minPercent, cappedMaxPercent)). Also ensure the callers that use these
values for tocPanelDefaultSize and when calling setLayout / setGroupLayout use
the clamped results so defaultSize, minSize and maxSize are always within 0–100.

src/renderer/components/editor/MarkdownEditor.tsx (1)

18-25: ⚠️ Potential issue | 🟠 Major

Clamp the computed TOC percent bounds to the panel group's real range.

This helper can still return percentages above 100 on narrow layouts. Once that happens, tocPanelDefaultSize and the setLayout([100 - tocSize, tocSize]) sync effect can push invalid sizes into the panel group and collapse the editor pane. Please cap the derived bounds before they flow into defaultSize/setLayout.

Possible hardening

 function getTocPercentBounds(panelWidth: number): { minPercent: number; maxPercent: number } {
-  const minPercent = (TOC_MIN_WIDTH / panelWidth) * 100
-  const maxPercent = (TOC_MAX_WIDTH / panelWidth) * 100
+  const safePanelWidth = Math.max(panelWidth, 1)
+  const minPercent = Math.min(100, (TOC_MIN_WIDTH / safePanelWidth) * 100)
+  const maxPercent = Math.min(100, (TOC_MAX_WIDTH / safePanelWidth) * 100)
 
   return {
     minPercent,
     maxPercent: Math.max(minPercent, maxPercent)
   }
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/editor/MarkdownEditor.tsx` around lines 18 - 25, The
getTocPercentBounds function can return values >100 on narrow layouts; clamp the
computed minPercent and maxPercent into the valid [0, 100] range before
returning so they never flow invalid sizes into defaultSize/setLayout. Update
getTocPercentBounds to compute minPercent and maxPercent from
TOC_MIN_WIDTH/TOC_MAX_WIDTH and panelWidth, then apply clamping (e.g. minPercent
= Math.max(0, Math.min(100, minPercent)); maxPercent = Math.max(minPercent,
Math.min(100, maxPercent))) so maxPercent is never below minPercent and neither
exceeds 100.